<script lang="ts" setup>
  import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { updateDeptService, deleteDeptService, updateDeptStatusService } from '@/api/dept'
  import DeptDialog from './components/deptDialog.vue'
  import { TableOptions } from '@/types/dataTable'
  const { listQuery } = useParamsListQuery()
  const deptDialog = ref()
  const pagingTable = ref() // 用于获取表格实例
  defineOptions({
    name: 'DepartmentList',
  })
  const options = reactive<TableOptions>({
    add: {
      enable: true,
      permission: '',
    },
    edit: {
      enable: false,
      permission: '',
    },
    delete: {
      enable: false,
      permission: '',
      url: '/dict/deleteDicData',
    },
    listUrl: '/department/list', // 列表请求URL
  })
  const editHandler = (row) => {
    console.log('编辑行数据', row)
    deptDialog.value.show(row)
  }

  const del = (value) => {
    ElMessageBox.confirm(`你确定要删除 <span style="color:red">${value.name}</span> 部门吗?若有子部门则都会删除！`, '温馨提示', {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        await deleteDeptService([value.id])
        getDeptList()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {})
  }
  const changeStatus = (row) => {
    ElMessageBox.confirm(`确定要${!row.isUse ? '禁用' : '启用'} ${row.name} 部门吗？`, '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        await updateDeptService(row)
        ElMessage({
          type: 'success',
          message: `${!row.isUse ? '禁用' : '启用'}成功`,
        })
      })
      .catch(() => {
        row.isUse = 1 - row.isUse
      })
  }
  const openDicDialog = () => {
    deptDialog.value.show()
  }
  const getDeptList = () => {
    pagingTable.value?.getList()
  }
  //================================ END 功能函数 =================================
</script>
<template>
  <div class="app-container">
    <div class="table-inner">
      <data-table ref="pagingTable" v-model:list-query="listQuery" :options="options" @add="openDicDialog">
        <template #data-columns>
          <el-table-column prop="name" label="部门名称" align="center" />
          <el-table-column prop="isUsed" label="状态" align="center" width="140">
            <template #default="scope">
              <el-switch
                v-model="scope.row.isUse"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="departmentLeader" label="负责人" align="center" width="140">
            <template #default="scope">
              <el-tag v-if="scope.row.departmentLeader" type="info">
                <!-- <el-icon v-if="scope.row.gender === '男'" style="color: aqua"><Male /></el-icon>
                <el-icon v-else style="color: violet"><Female /></el-icon> -->
                {{ scope.row.departmentLeader }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="desc" :show-overflow-tooltip="true" label="部门描述" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" width="180">
            <template #default="scope">
              <div>
                <el-icon style="margin-right: 10px"><Clock /></el-icon>
                <span>{{ scope.row.createTime }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作" width="200px" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)"> 编辑 </el-button>
              <el-button type="danger" size="small" icon="Delete" @click="del(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </template>
      </data-table>
    </div>
    <DeptDialog ref="deptDialog" @refresh-list="getDeptList" />
  </div>
</template>

<style scoped lang="scss">
  @import './index';
  :deep(.el-table__body tr.current-row > td) {
    background: rgb(233, 239, 253) !important;
  }
</style>
